import {
  createInbizSchema,
  createEmptySchema,
  createDecoratorStyleSchema,
  createComponentStyleSchema,
  createBizProps,
  createControllerSchema,
} from '@inbiz/setters';
import { VerticalMenu as LocaleInbizMenu } from './locale';

export const MENU_HORIZONTAL = 'horizontal';
export const MENU_VERTICAL = 'vertical';

export const propsSchema = createInbizSchema({
  attribute: {
    // group_viewType: {
    //   type: 'void',
    //   'x-component': 'CollapseItem',
    //   properties: {
    //     'x-component-props': {
    //       type: 'object',
    //       properties: {
    //         viewtype: {
    //           type: 'Symbol',
    //           enum: ['horizontal', 'vertical'],
    //           'x-decorator': 'FormItem',
    //           'x-component': 'Select',
    //           'x-component-props': {
    //             defaultValue: 'horizontal',
    //           },
    //           platform: 'web',
    //         },
    //       },
    //     },
    //   },
    // },
    ...createEmptySchema({
      mainmenu: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        platform: 'web',
      },
      linkcomponent: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'SelectComponent',
        'x-component-props': {
          filter: 'Menu',
          range: 'layout',
        },
        'x-reactions': {
          dependencies: ['.mainmenu'],
          fulfill: {
            state: {
              visible: '{{$deps[0] == false}}',
            },
          },
        },
        platform: 'web',
      },
      jumpChild: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-reactions': {
          dependencies: ['.mainmenu'],
          fulfill: {
            state: {
              visible: '{{$deps[0] == true}}',
            },
          },
        },
        platform: 'web',
      },
      showlogo: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-component-props': {
          defaultChecked: true,
        },
        platform: 'web',
      },
      // 竖向按钮控制显示
      shrinkage: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-component-props': {
          defaultChecked: true,
        },
        platform: 'web',
      },

      // 显示类型
      displaytype: {
        type: 'string',
        'x-decorator': 'FormItem',
        enum: ['spread', 'shrink'],
        'x-component': 'Radio.Group',
        'x-component-props': {
          defaultValue: 'spread',
        },
        platform: 'web',
      },

      // 显示层级
      showLevel: {
        type: 'array<string | number>',
        'x-decorator': 'FormItem',
        enum: ['1', '2'],
        'x-component': 'Checkbox.Group',
        platform: 'web',
      },

      // 菜单类型
      menustyle: {
        type: 'string',
        enum: ['basic', 'modal'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
        'x-component-props': {
          defaultValue: 'basic',
        },
        platform: 'web',
      },
      // 手风琴模式
      isCollapse: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-component-props': {
          defaultChecked: true,
        },
        'x-reactions': {
          dependencies: ['.menustyle'],
          fulfill: {
            state: {
              visible: `{{$deps[0] == 'basic'}}`,
            },
          },
        },
        platform: 'web',
      },
      // 菜单类型
      // isAmin: {
      //   type: 'boolean',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'Switch',
      //   'x-component-props': {
      //     defaultChecked: true,
      //   },
      //   platform: 'web',
      // },
    }),
    ...createBizProps({
      logoconfig: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'UploadImg',
        'x-component-props': {
          tooltip: '推荐logo尺寸 180*60',
          left: 36,
        },
        platform: 'web',
      },
      smallLogoconfig: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'UploadImg',
        'x-component-props': {
          tooltip: '推荐logo尺寸 16*16',
          left: 50,
        },
        platform: 'web',
      },
      linkType: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'Radio.Group',
        'x-component-props': {
          defaultValue: 'in',
        },
        platform: 'web',
      },
      page: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'PageSelect',
        'x-reactions': {
          dependencies: ['.linkType'],
          fulfill: {
            state: {
              visible: "{{$deps[0] == 'in'||$deps[0] !== 'out'}}",
            },
          },
        },
        platform: 'web',
      },
      url: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'Input',
        'x-reactions': {
          dependencies: ['.linkType'],
          fulfill: {
            state: {
              visible: "{{$deps[0] == 'out'}}",
            },
          },
        },
        platform: 'web',
      },
    }),
  },
  style: {
    ...createComponentStyleSchema({
      fontColor: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
        platform: 'wap',
      },
      icoHoverColor: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
        platform: 'wap',
      },
      bgColor: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
        platform: 'wap',
      },
    }),
    ...createDecoratorStyleSchema(),
  },
  controller: createControllerSchema({
    events: [
      {
        name: "MenuClick",
        label: "菜单点击"
      },
      // {
      //   name: "onvmenu",
      //   label: "当前一级菜单加载"  // 内部联动使用
      // },
      // {
      //   name: "mnuQuickCollapseChange",
      //   label: "展开菜单变化"  // 内部联动使用
      // },
    ]
  })
});

export const pluginSchema = createInbizSchema({
  attribute: {
    ...createEmptySchema({
      direction: {
        type: 'string',
        enum: ['column', 'row'],
        'x-decorator': 'FormItem',
        'x-component': 'Radio.Group',
        'x-component-props': {
          defaultValue: 'row',
          optionType: 'button',
        },
      },
      align: {
        type: 'string',
        enum: ['flex-start', 'flex-end', 'center'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
        'x-component-props': {
          defaultValue: 'center',
        },
      },
    }),
  },
  style: {
    ...createComponentStyleSchema({}),
    ...createDecoratorStyleSchema(),
  },
});

export const defaultBizProps = {
  logoconfig: '',
  linkType: 'in',
};

export const defaultProps = {
  viewtype: 'vertical',
  showlogo: true,
  shrinkage: true,
  displaytype: 'spread',
  menustyle: 'basic',
  showLevel: ['1', '2'],
  mainmenu: true,
  fontColor: 'rgba(51,51,34,1)',
  icoHoverColor: 'var(--inbiz-color-primary)',
  bgColor: 'rgba(255,255,255,1)',
};

export const defaultBehavior = {
  extends: ['Field'],
  name: 'VerticalMenu',
  selector: (node) => node?.props['x-component'] === 'VerticalMenu',
  designerLocales: LocaleInbizMenu,
  designerProps: {
    propsSchema: propsSchema,
  },
};

export const defaultResource = {
  icon: 'VerticalMenu',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        'x-decorator': 'Container',
        title: {
          value: 'VerticalMenu.title',
        },
        'x-decorator-props': {
          clickable: true,
          style: {
            height: '100%',
          },
        },
        'x-component': 'VerticalMenu',
        'x-component-biz-props': defaultBizProps,
        'x-component-props': defaultProps,
      },
      children: [
        {
          componentName: 'Field',
          props: {
            type: 'void',
            title: {
              value: 'VerticalMenu.solt',
            },
            'x-decorator': 'Container',
            'x-decorator-props': {
              clickable: true,
            },
            'x-component': 'VerticalMenu.Plugin',
            'x-component-props': {
              style: {
                height: 'inherit',
                width: '100%',
              },
            },
          },
        },
      ],
    },
  ],
};
